
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image,
  Dimensions,TouchableOpacity,ScrollView
} from 'react-native';
import TopBar from '../../bar/TopBar'
import BASEURL from '../../api/api'
import Loading from '../../common/Loading'
import Toast, {DURATION} from 'react-native-easy-toast'
var {height, width} = Dimensions.get('window');
export default class NoticeDetail extends Component {
  static navigationOptions = ({ navigation }) =>{
    return{
      headerTitle:<TopBar title='申请详情' navigation = {navigation}/>,
      headerLeft:null,
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      apply:{},
      loading:true,
    })
    //console.log(this.props)
  }
  componentWillMount(){
    this.fetchData();
  }
  fetchData(){
    fetch(BASEURL+'getApply?applyId='+this.props.navigation.getParam('applyId'))
    .then(res=>res.json())
    .then(response=>{
      console.log('res',response)
      //alert(response.apply)
      if(response.falg){
          
        this.setState({
          apply:response.apply,
          loading:false,
        })
      } else {
        this.setState({
          loading:false,
        })
        this.refs.toast.show('获取失败');
      }
      
    })
  }
  _audit(id){
    if(this.props.navigation){
      this.props.navigation.push('applyAudit',{applyId:this.props.navigation.getParam('applyId')})
    }
  }
  render(){
    var item = this.state.apply
    if(this.state.loading){
      return <Loading />
    } 
    var item = this.state.apply
    var statusMap = {'0':'待审核','1':'已审核','2':'审核未通过','3':'草稿'}
    return(
      <ScrollView style={styles.container}>
        <View style={styles.headerStyle}>
          <View style={{padding:10}}>
            <Image style={styles.lefgImg} source={require('../../images/no-img.png')}/>
          </View>
          <View>
            <Text style={{fontSize:17,padding:5}}>{item.hy_name}</Text>
            <Text style={styles.subTitle}>申请原因：{item.content}</Text>
            <Text style={styles.subTitle}>申请人：{item.applicant}</Text>
          </View>
        </View>
        <Header title='申请信息'/>
        <Row title='电站位置' value={item.hy_location} style={styles.bottomBor}/>
        <Row title='申请开始时间' value={item.start_time} style={styles.bottomBor}/>
        <Row title='申请结束时间' value={item.end_time} style={styles.bottomBor}/>
        <Row title='申请时间' value={item.apply_time} style={styles.bottomBor}/>
        <Row title='申请状态' value={statusMap[item.status]}/>
        <Header title='审核信息'/>
        <Row title='审核人员名称' value={item.auditor_name} style={styles.bottomBor}/>
        <Row title='审核时间' value={item.audit_time} style={styles.bottomBor}/>
        <Row title='审核内容' value={item.audit_content}/>
        {item.status=='0'?
        <View style={styles.btnView}>
          <TouchableOpacity  style={styles.btn} activeOpacity={0.6} onPress={()=>{this._audit()}}>
          <Text style={{color:'white',fontSize:16}}>审核</Text>
          </TouchableOpacity>
        </View>:null
        }
        <Toast ref="toast" position='bottom' positionValue={200}/>
      </ScrollView>
    )  
  }
}
class Header extends Component{
  render(){
    return(
      <View>
        <View style={{height:10,backgroundColor:'#f0f0f0',width:'100%'}}></View>
        <View style={styles.header}>
          <Image source={require('../../images/monitor-data.png')}/>
          <Text style={styles.headerText}>{this.props.title}</Text>
        </View>
      </View>
     
    )
  }
}
class Row extends Component{
    render(){
        return (
        <View style={[styles.row,this.props.style]}>
            <Text>{this.props.title}</Text><Text>{this.props.value}</Text>
        </View>
        )
    }
}
const styles = StyleSheet.create({
  btnView:{
    backgroundColor:'#f0f0f0',
  },  
  btn:{
    marginTop:20,
    marginBottom:20,
    marginLeft:20,
    marginRight:20,
    backgroundColor:'#5fbcf9',
    padding:10,
    justifyContent:'center',
    alignItems:'center',
    borderRadius:5,
  },
  subTitle:{
    padding:5,
    fontSize:14,
  },
  headerStyle:{
    flexDirection:'row',
    alignItems:'center'
  },  
  lefgImg:{
    width:width*0.22,
    height:width*0.22*1.23,
    marginLeft:20,
  },
  bottomBor:{
    borderBottomWidth:StyleSheet.hairlineWidth,
    borderBottomColor:'#ccc',
  },
  headerText:{
    fontSize:17,
    marginLeft:5,
  },
  header:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    borderBottomWidth:StyleSheet.hairlineWidth,
    borderBottomColor:'#ccc',
    paddingBottom:8,
    paddingTop:8,
    paddingLeft:15,
  },
  row:{
    flexDirection:'row',
    justifyContent:'space-between',
    paddingTop:10,
    paddingBottom:10,
    marginLeft:10,
    marginRight:10,
  },    
  container:{
    flex:1,
  },

})